<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="/css/total/orderList.css">
  <title>课程列表</title>
  <% include ../component/_common_tongji.html %>
  <% include ../component/common_meta.html %>
    <style>
        [v-cloak] {
          display: none;
        }
  
        #show {
          display: none;
        }
        .list {
          height: 2rem;
          padding: 0.3rem 0;
          position: relative;
          font-size: 0.3rem;
          padding-right: 0.3rem;
          border-bottom: 0.02rem solid #EEE;
        }
        .title {
          font-size: 0.36rem;
          color: #030303;
          line-height:  0.5rem;
          font-weight: 700;
          height: 1.64rem;
          word-break: break-all;
        }
        .list img {
          width: 2rem;
          height: 2rem;
          float: left;
          margin-right: 0.3rem;
          padding-left: 0.2rem;
        }
        .list .right {
          width: 0.14rem;
          height: 0.25rem;
          position: absolute;
          top: 1.16rem;
          right: 0.2rem;
          margin-right: 0;
        }
        .price span {
          display: inline-block;
          height: 0.4rem;
          font-size: 0.22rem;
          padding: 0 0.1rem;
          background-color: #999;
          line-height: 0.4rem;
          border-radius: 0.08rem;
          color: #fff;
          margin-left: 0.2rem;
          position: absolute;
          bottom: 0.4rem;
          right: 0.6rem;
        }
      </style>
</head>

<body>
  <div id="app">
    <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
    <div class="content" v-cloak>
      <div class="list" v-for="item in coursesList" @click="handleGoBuy(item.exam_id)">
        <img :src="item.img_url == '' ? img : item.img_url " alt="">
        <p class="title">{{item.exam_name}}</p>
        <p class="price">价格：{{item.price}} <span v-if="item.state == -1">已下架</span></p>
        <img src="/img/right.png" alt="" class="right">
      </div>
    </div>
  </div>
  <% include ../component/common_js.html %>
  <!-- Initialize Swiper -->
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        title: '高考命题预测与题——2018临考押题卷',
        img: '/img/kqcc_share.jpg',
        price: '￥298.0',
        coursesList: []
      },
      mounted: function () {
        this.handleGetExamList();
      },
      methods: {
        handleGetExamList () {
          var vm = this;
          api.post('/api/v2/exam/getExamList').then(res => {
            console.log(res);
            if (res.data.res_code == 1) {
              vm.coursesList = res.data.data;
            }
          }).catch(err => {
            setLog('/api/v2/exam/getExamList:catch', JSON.stringify(err));
          })
        },
        handleGoBuy(exam_id) {
          var url = "/tlmall/signup";
          // location.search获取url中所有的参数，并传到支付页
          if (location.search == "") {
            url += "?exam_id="+exam_id+"&o=xg&sale_id=1";
          } else {
            url += location.search + "&exam_id="+exam_id+"&o=xg&sale_id=1";
          }
          location.href = url;
        },
      }
    })


  </script>
</body>

</html>